import { ComputedRef, Ref, computed } from 'vue';
import { IGlobalDataProps } from '@/store/index';
import { useStore } from 'vuex';
import { EDITOR_RESET, REDO, CHECK_REDO_DISABLE, CHECK_UNDO_DISABLE, COPY_COMPONENTS, PASTE_COMPONENTS, DETELE_COMPONENTS, MOVE_COMPONENTS, UPDATE_CURRENT_ID, UNDO } from '@/utils/Const';

import useAppInstance from '@/hooks/useAppInstance';

export type MoveDirection = 'Up' | 'Down' | 'Left' | 'Right';

export default function dataOperations(componentId: ComputedRef<string> | Ref<string>) {
	const store = useStore<IGlobalDataProps>();

	const { globalFunc } = useAppInstance();
	return {
		copy: () => {
			if (componentId.value && componentId.value !== 'page') {
				store.commit(`editor/${COPY_COMPONENTS}`);
				globalFunc.$message.success({
					message: '已拷贝当前图层',
					type: 'success',
				});
			}
		},
		paste: () => {
			if (componentId.value && componentId.value !== 'page') {
				store.commit(`editor/${PASTE_COMPONENTS}`);
				globalFunc.$message.success({
					message: '已黏贴当前图层',
					type: 'success',
				});
			}
		},
		delete: () => {
			if (componentId.value && componentId.value !== 'page') {
				globalFunc.$message.success({
					message: '删除当前图层成功',
					type: 'success',
				});
				store.commit(`editor/${DETELE_COMPONENTS}`);
			}
		},
		move: (direction: MoveDirection, amount: number) => {
			if (componentId.value && componentId.value !== 'page') {
				store.commit(`editor/${MOVE_COMPONENTS}`, { direction, amount });
			}
		},
		cancel: () => {
			if (componentId.value && componentId.value !== 'page') {
				store.commit(`editor/${UPDATE_CURRENT_ID}`, '');
			}
		},
		undo: () => {
			let checkUndoDisable = computed<boolean>(() => store.getters[`editor/${CHECK_UNDO_DISABLE}`]);
			if (!checkUndoDisable.value) {
				store.commit(`editor/${UNDO}`);
			} else {
				globalFunc.$message.warning({
					message: '当前没有可撤销的',
					type: 'warning',
				});
			}
		},
		redo: () => {
			let checkRedoDisable = computed<boolean>(() => store.getters[`editor/${CHECK_REDO_DISABLE}`]);
			if (!checkRedoDisable.value) {
				store.commit(`editor/${REDO}`);
			} else {
				globalFunc.$message.warning({
					message: '当前没有可恢复的',
					type: 'warning',
				});
			}
		},
		reset: () => {
			globalFunc.$messageBox
				.confirm('是否重置所有, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
				.then(() => {
					store.commit(`editor/${EDITOR_RESET}`);
					globalFunc.$message.success({
						type: 'success',
						message: '已重置!',
					});
				})
				.catch(() => {
					globalFunc.$message.warning({
						type: 'warning',
						message: '已取消重置!',
					});
				});
		},
	};
}

export const operationText: { [key: string]: { text: string; shortcut: string } } = {
	copy: {
		text: '拷贝图层',
		shortcut: '⌘C / Ctrl+C',
	},
	paste: {
		text: '粘贴图层',
		shortcut: '⌘V / Ctrl+V',
	},
	delete: {
		text: '删除图层',
		shortcut: 'Backspace / Delete',
	},
	cancel: {
		text: '取消选中',
		shortcut: 'ESC',
	},
	undo: {
		text: '撤销',
		shortcut: '⌘Z / Ctrl+Z',
	},
	redo: {
		text: '重做',
		shortcut: '⌘⇧Z / Ctrl+Shift+Z',
	},
	reset: {
		text: '重置',
		shortcut: '⌘⇧R / Ctrl+Shift+R',
	},
	move: {
		text: '上下左右移动一像素',
		shortcut: '↑ ↓ → ←',
	},
	moveTen: {
		text: '上下左右移动十像素',
		shortcut: 'Shift + ↑ ↓ → ←',
	},
};
